<template>
  <div>
    <form @submit.prevent="handleLogin">
      <input type="text" v-model="username" />
      <input type="password" v-model="password" />
      <button type="submit">登录</button>
    </form>
    <h1>{{ num }}</h1>
    <h1>{{ newNum }}</h1>
    <button @click="addNum">+1</button>
  </div>
</template>

<script>
import { computed, onMounted, onUnmounted, onUpdated, reactive, ref, toRefs, watch } from "vue";
export default {
  // 组合api
  setup() {
    // 定义 变量  方式一
    const user = reactive({
      username: "",
      password: "",
    });
    // 定义 变量  方式二
    const num = ref(1);

    // 定义方法
    const addNum = () => {
      // 通过ref 定义的变量 访问值 value
      num.value++;
      user.username+= 1
    };

    // 定义计算属性
    const newNum = computed(() => {
      return num.value * 10
    })

    // 定义侦听属性
    watch(num, (newValue, oldValue) => {
      console.log(oldValue)
      console.log('num的发生改了!!!!');
      console.log(newValue);
    })

    // 声明周期 挂载
    onMounted(() => {
      console.log(111111);
    })
    // 声明周期 更新
    onUpdated(() => {
      console.log(222222222222222222);
    })
    // 声明周期 销毁
    onUnmounted(() => {
      console.log(333333333333);
    })
    addNum();
    return {
      // 将对象每一个属性抛出
      ...toRefs(user),
      num,
      addNum,
      newNum
    };
  },

  // 选项api
  // data() {
  //   return {
  //     user: {
  //       username: '',
  //       password: ''
  //     }
  //   }
  // },
  // methods: {
  //   handleLogin() {
  //     console.log(this.user);
  //   }
  // }
};
</script>
